<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="梅子">
    <title></title>
    <style>
        *{
            box-sizing: border-box;
        }
        body {
            margin: 0;
        }
         main{
           width: 100%;
           margin: 0 auto;
           height: 900px;
            /* border: 1px solid blue;  */
         }  

        nav {
            width: 100%;
             line-height: 5px; 
             font-size: 15px;
            border-bottom: 1px solid black;
        }
        ul{
            margin: 0;
        }

        nav li {
            padding: 0;
            margin: 0;
            list-style: none;
            float: right;
            margin: 15px;
            color: black;
        }
        .strong a{
               color:black;
               font-weight: bold; 
        }
        li a{
            color: black;
        }
        .baidu img{
            width: 140px;
            height: 45px;
            position: relative;
            top: 10px;
        }
        .box{
            width: 1000px;
            margin: 0 auto;
            margin-top: 20px;
        }
        .border{
            width: 520px;
            height: 40px;
            margin-left: 15px;
            margin-top: -10px;
        }
        .btn{
            width: 104px;
            height: 40px;
            color: white;
            background-color: #38f;
            border: none;
            padding-bottom: 3px;
            margin-left: -5px;
            outline: none;
        }
        .box a{
            font-size: 15px;
            color:black;
            padding: 5px;
        }
        p{
            position: relative;
            left: 155px;
            font-size: 12px;
        }
        header{
            width: 100%;
            background-color: #01204f;
            line-height: 15px
        }
        .fix{
            width: 1300px;
            margin: 0 auto;
            padding-left: 0;
            position: relative;
            display: flex;
             z-index: 100;
           
        }
        .fix li{
            padding: 0;
            margin: 0;
            list-style: none;
            color: white;
            cursor: pointer;
             width: 70px;
             height: 40px;
             line-height: 40px;
             text-align: center;
        }
        section{
            width: 1200px;
            margin: 0 auto;
            height: 2000px;
            background-color: #38f;
        }
        
        .bg{
            /*width: 40px;*/
            height: 40px;
            position:absolute;
            background-color: red;
            z-index: -1;
            transition: all 0.3s linear;
        }
        .active{
            background-color: red;
        }
         .back-to-top{
            width: 80px;
            height: 30px;
            background-color: red;
            text-align: center;
            line-height: 30px;
            position: fixed;
            right: 50px;
            bottom: -30px;
            cursor: pointer;
            transition: all 0.5s linear;
        }

        .clear{
            clear: both;
        }
    </style>
</head>

<body>
    <main>
        <nav>
            <ul>
                <li><a href="#">百度新闻客户端</a></li>
                <li><a href="#">注册</a></li>
                <li><a href="#">登录</a></li>
                <li><a href="#">百度首页 </a></li> 
                <li class="strong"><a href="#">地图 </a>&nbsp;&nbsp;|</li>
                <li class="strong"><a href="#">文库</a></li>
                <li class="strong"><a href="#">视屏</a></li>
                <li class="strong"><a href="#">图片</a></li>
                <li class="strong"><a href="#">音乐</a></li>
                <li class="strong"><a href="#">知道</a></li>
                <li class="strong"><a href="#">贴吧</a></li>
                <li class="strong"><a href="#">新闻</a></li>
                <li class="strong"><a href="#">网页</a></li>
                <div class="clear"></div>
            </ul>
        </nav>
        <div class="box">
          <span class="baidu"><img src="baidu.png" alt=""></span>
          <input type="text" class="border">
          <button type="button" class="btn">百度一下</button>
          <a href="#">帮助</a>
          <a href="#">高级搜索</a>
          <a href="#">设置</a>
          <p>
            <input type="radio" name="title" >新闻标题
               <input type="radio" name="title">新闻全文
          </p>
        </div>
        <header>
             <ul class="fix">
                 <li class="active">首页</li>
                 <li>百家号</li>
                 <li>国内</li>
                 <li>国际</li>
                 <li>军事</li>
                 <li>社会</li>
                 <li>财经</li>
                 <li>娱乐</li>
                 <li>体育</li>
                 <li>互联网</li>
                 <li>科技</li>
                 <li>游戏</li>
                 <li>时尚</li>
                 <li>女人</li>
                 <li>汽车</li>
                 <li>个性推荐</li>
                 <li>更多</li>
                 <div class="bg"></div>
                 <!--<div class="clear"></div>-->
             </ul>
        </header>
            <section> 
               
            </section>
            </main>
             <div class="back-to-top">返回顶部</div>
    
</body>
</html>
<script>
    var body=document.querySelector('body');
    
    //  var scrollTop=document.body.scrollTop;
        //  document.documentElement.scrollTop;
     var header=document.querySelector('header')
     var content=document.querySelector('.content')
    //   console.log(header.offsetTop);
    window.onscroll=function(){
        if(body.scrollTop>160){
            header.style.position='fixed';
            header.style.top='0';
        }else{
            header.style.cssText='';
        }
        if(body.scrollTop >=300){
            backToTop.style.bottom = '30px';
        }else{
             backToTop.style.bottom = '-30px';
        }
     }

   
   var lis=document.querySelectorAll('.fix li');
   var bg=document.querySelector('.bg')
   for(var i=0;i<lis.length;i++){
       lis[i].onmouseover=function(){
          
        var left=this.offsetLeft;
        bg.style.left=left+'px';
        var width=this.offsetWidth;
        bg.style.width=width+'px';
       }
       lis[i].onmouseout=function(){
                bg.style.left = 0;
            bg.style.width = '60px';
       }

   }
   var backToTop = document.querySelector('.back-to-top');
    backToTop.onclick = function(){
        document.documentElement.scrollTop = document.body.scrollTop = '0';
    }
    
    
</script>